<template>
  <div />
</template>
<script>
import {
  getEmpInfoCount,
  getEmpInfos,
  delEmpInfo,
  transferFormal,
  leavePosition,
  transferRegular,
  confirmToJoin,
  saveEmpInfoPre,
  selectEmpInfoALLRelation,
  selectEmpInfoLeaveRelation,
  selectEmpInfoOnJobRelation,
  selectEmpInfoPendingRelation,
  selectEmpInfoToFormalRelation,
  empRegisterAccount,
  selectEmpInfoTransferRelation,
  saveEmpInfoRelation,
  confimLeave,
  selectEmpInfoListForLeave,
  revokeLeaveApi,
  confimTransferPositionApi,
  revokeTransferPositionApi,
  onJobFlows
} from "@/api/staff/staff";
import { getDepartmentInTree } from "@/api/department/department";
import { getPositionInTree } from "@/api/department/position";
import { getEmpListByDep, empDistribute } from "@/api/empDepRelation/empDepRelation";
import { transferJob, getTransferJobInfo } from "@/api/staff/empChanges";

const name = { title: "姓名", dataIndex: "name" };
const dep = { title: "部门", dataIndex: "depName" };
const job = { title: "岗位", dataIndex: "positionName" };
const phone = { title: "手机号", dataIndex: "phone" };
const birthPlace = { title: "籍贯", dataIndex: "birthplace" };
const entryTime = {
  title: "预计入职时间",
  dataIndex: "preJoinDate",
  customRender: (text, record, index) => {
    return formatDate(text);
  }
};
const number = {
  title: "入职登记表",
  dataIndex: "number",
  customRender: (text, record, index) => {
    return record.joinFormStatus ? "已提交" : "未提交";
  }
};

// 入职时间

const joinDate = {
  title: "入职时间",
  dataIndex: "joinDate",
  customRender: (text, record, index) => {
    return formatDate(text);
  }
};
// 转正时间
const regularData = {
  title: "转正时间",
  dataIndex: "turnStraightDate",
  customRender: (text, record, index) => {
    return formatDate(text);
  }
};

// 预计离职日期

// 离职原因

const status = {
  title: "状态",
  dataIndex: "status", // 待入职、待审批、审批中
  customRender: (text, record, index) => {
    return getStatusText(text);
  }
};
const status1 = {
  title: "状态",
  dataIndex: "status", // 待入职、待审批、审批中
  customRender: (text, record, index) => {
    return getEmployeeStatus(text, record, 1);
  }
};
const status2 = {
  title: "状态",
  dataIndex: "status", // 待入职、待审批、审批中
  customRender: (text, record, index) => {
    return getEmployeeStatus(text, record, 2);
  }
};
const status3 = {
  title: "状态",
  dataIndex: "status", // 待入职、待审批、审批中
  customRender: (text, record, index) => {
    return getEmployeeStatus(text, record, 3);
  }
};
const status4 = {
  title: "状态",
  dataIndex: "status", // 待转正、待审批、审批中
  customRender: (text, record, index) => {
    return getEmployeeStatus(text, record, 4);
  }
};
const status5 = {
  title: "状态",
  dataIndex: "status", // 待转正、待审批、审批中
  customRender: (text, record, index) => {
    return getEmployeeStatus(text, record, 5);
  }
};
const operate = {
  title: "操作",
  dataIndex: "operate",
  scopedSlots: { customRender: "operate" }
};
const allColumn = [
  // renderIndex,
  name,
  dep,
  job,
  phone,
  // entryTime,
  number,
  status,
  operate
];
const allColumn1 = [
  // renderIndex,
  name,
  dep,
  job,
  phone,
  entryTime,
  number,
  status1,
  operate
];

const allColumn2 = [name, dep, job, phone, joinDate, status2, operate];
const allColumn3 = [name, dep, job, phone, joinDate, regularData, status3, operate];
const allColumn4 = [name, dep, job, phone, joinDate, regularData, status4, operate];
const allColumn5 = [name, dep, job, phone, joinDate, regularData, status5, operate];

// 全部选项卡   tapArray 中 index 相同
const tapArray = [
  {
    id: "0",
    name: "countAll",
    title: "全部",
    color: "rgba(106, 101, 246,1)",
    tableColumn: allColumn,
    count: 0
  },
  {
    id: "1",
    name: "countPre",
    title: "入职管理",
    color: "rgba(79,174,252,1)",
    tableColumn: allColumn1,
    count: 0,
    status: 1
  },
  {
    id: "2",
    name: "countInformal",
    title: "转正管理",
    color: "rgba(109,196,176,1)",
    tableColumn: allColumn2,
    count: 0,
    status: 2,
    formalType: 1,
    employType: 1
  },
  {
    id: "3",
    name: "countOn",
    title: "在职管理",
    color: "rgb(232,193,255)",
    tableColumn: allColumn3,
    count: 0,
    status: 2
  },
  {
    id: "4",
    name: "countLeave",
    title: "离职管理",
    color: "rgba(255,109,109,1)",
    tableColumn: allColumn4,
    count: 0,
    status: 4
  },
  {
    id: "5",
    name: "countChange",
    title: "调岗管理",
    color: "#44D7B6",
    tableColumn: allColumn5,
    count: 0,
    status: 5
  }
];
// 渲染各个选项卡上的数值
function renderTapCount(data) {
  let countData = {};
  getEmpInfoCount(data).then(res => {
    countData = res.data;
    for (const i in tapArray) {
      const obj = tapArray[i];
      const countNum = countData[obj.name];
      if (isNaN(countNum) || countNum === 0) {
        continue;
      }
      obj["count"] = countNum;
    }
  });
}

const pagination = {
  pageSize: 10,
  total: 0,
  size: "default",
  current: 1,
  showTotal: total => `共 ${total} 条`,
  showQuickJumper: true
};

function getStatusText(status) {
  if (status === 1) {
    return "待入职";
  } else if (status === 2) {
    return "入职";
  } else if (status === 3) {
    return "待离职";
  } else if (status === 4) {
    return "离职";
  } else {
    return "";
  }
}

function getEmployeeStatus(status, record, selectId) {
  const approvalStatus = record.approvalStatus;

  let text = "";

  if (selectId === 1) {
    // 在职管理
    text = "待入职";
  } else if (selectId === 2) {
    // 转正管理
    text = "待转正";
  } else if (selectId === 3) {
    // 在职管理
    text = "正式员工";
  } else if (selectId === 4) {
    // 离职管理
    text = "待离职";
  } else if (selectId === 5) {
    // 调岗管理
    text = "待调岗";
  }
  if (approvalStatus === 4 || approvalStatus === 5) {
    return text;
  } else if (approvalStatus === 1) {
    return "待审批";
  } else if (approvalStatus === 2) {
    return "审批中";
  } else if (approvalStatus === 3) {
    return "审批未通过";
  }
}

const columns = [
  { title: "姓名", dataIndex: "name" },
  { title: "手机号", dataIndex: "phone" },
  { title: "岗位", dataIndex: "positionName" },
  { title: "工号", dataIndex: "number" },
  { title: "工作邮箱", dataIndex: "email" }
];

export default {
  inject: ["reload"],
  data() {
    return {
      columns,
      leaveTag: false,
      moveTag: false,
      empInfoList: [],
      titleSubmit: "办理入职",
      visibleJoinDrawer: false,
      visibleLeaveDrawer: false,
      visibleRegularDrawer: false,
      visibleEmpyleeDrawer: false,
      visibleLeaveModal: false,
      visibleMoveDrawer: false,
      entryForm: this.$form.createForm(this),
      joinForm: this.$form.createForm(this),
      regularForm: this.$form.createForm(this),
      leaveForm: this.$form.createForm(this),
      empyleeForm: this.$form.createForm(this),
      moveForm: this.$form.createForm(this),
      employTypeOptions: [
        // { value: "0", label: "非正式" },
        { value: "1", label: "正式" }
      ],
      employType: "",
      informalTypeOptions: [
        { value: "1", label: "实习" },
        { value: "2", label: "劳务" },
        { value: "3", label: "雇佣" },
        { value: "4", label: "返聘" },
        { value: "5", label: "外包" }
      ],
      depInfoOptions: [],
      positionOptions: [],
      adjustButtonDisabled: false,

      visibleMerber: false,
      visibleSubmit: false,
      visibleDrawer: false,
      checkedListGroup: [],

      joinFormData: {},
      regularFormData: {},

      companyId: "",
      selectBox: false,
      total: 0,
      sexvalue: "",
      depIdvalue: "",
      employTypevalue: "",
      formalTypevalue: "",
      selectedRowKeys: [],

      // 选项卡
      tapList: tapArray.slice(0, 8),
      selectId: typeof this.$route.query.selectId === "undefined" || this.$route.query.selectId === "" ? "0" : this.$route.query.selectId,
      // 表格
      managementList: {
        title: tapArray[0].tableColumn,
        data: [],
        pagination: pagination,
        loading: false
      },

      // 姓名或手机号
      nameOrPhone: "",
      nameOrPhoneOrEmail: "",
      // 性别
      sexOptions: [
        { value: "1", label: "男" },
        { value: "2", label: "女" }
      ],
      sex: "",
      depId: "",
      // 转正状况
      formalTypeOptions: [
        { value: 1, label: "试用期" },
        { value: 2, label: "转正" }
      ],
      formalType: ""
    };
  },
  watch: {
    // 根据selectId的变化加载不同的title 和内容
    selectId: function() {
      this.managementList.title = tapArray[this.selectId].tableColumn;

      this.managementList.pagination.current = 1;
      this.getEmpInfos();
    },
    $route(to, from) {
      this.selectId = this.$route.query.selectId;
      this.hideList("leaveTag");
      this.hideList("moveTag");
    }
  },
  created() {
    this.companyId = this.$store.state.hr.companyId;
    this.getEmpInfos();
    getDepartmentInTree({ companyId: this.companyId }).then(res => {
      this.depInfoOptions = this.tree(res.data, "depChildList", true);
    });
    getPositionInTree({ companyId: this.companyId }).then(res => {
      this.positionOptions = this.tree(res.data, "positionChildList", true);
    });
    renderTapCount({ companyId: this.$store.state.hr.companyId });
  },
  methods: {
    revokeLeave(e) {
      revokeLeaveApi({ empIds: [e.id], changeType: 10, companyId: "a", id: "a" }).then(res => {
        this.$notification["success"]({
          message: "success",
          description: "操作成功"
        });
      });
    },
    confimTransferPosition(e) {
      confimTransferPositionApi(e.id).then(res => {
        this.$notification["success"]({
          message: "success",
          description: "操作成功"
        });
      });
    },
    revokeTransferPosition(e) {
      revokeTransferPositionApi({ empIds: [e.id], changeType: 10, companyId: "a", id: "a" }).then(res => {
        this.$notification["success"]({
          message: "success",
          description: "操作成功"
        });
      });
    },

    // 获取某公司入职可用的的所有审批流程
    onJobFlowsFunc() {
      onJobFlows(this.$store.state.hr.companyId).then(res => {
        this.approFlowId = "";
      });
    },

    openUser(e) {
      empRegisterAccount(e).then(res => {
        this.$notification["success"]({
          message: "success",
          description: "开通成功"
        });
        this.reload();
      });
    },
    getMoment(date) {
      return date ? this.moment(date) : null;
    },
    // button group start
    addMerber() {
      this.$router.push({
        name: "addEmpInfo"
      });
    },
    goto(tag) {
      this[tag] = true;
    },
    hideList(tag) {
      this[tag] = false;
    },
    // button group end
    // 办理入职 start
    onJoinEmp() {
      this.visibleSubmit = false;
      this.entryForm.resetFields();
      this.visibleDrawer = true;
      // 获取审批流程
      this.onJobFlowsFunc();
    },
    merberLeave() {
      this.visibleLeaveDrawer = true;
    },
    makeLeave(e) {
      this.visibleLeaveDrawer = true;
      this.selectedRowKeys = [e.id];
      setTimeout(() => {
        this.leaveForm.setFieldsValue({
          name: e.name
        });
      }, 300);
    },
    merberMove() {},
    onChangeLeaveModal(checkedValues) {
      this.checkedListGroup = checkedValues;
    },
    confirmLeaveModal() {
      this.visibleLeaveModal = false;
      this.leaveForm.setFieldsValue({
        quitReason: this.checkedListGroup
      });
    },
    handleCancelLeaveModal() {
      this.visibleLeaveModal = false;
      // this.flag = false
    },
    LeaveChange(tag) {
      this.checkedListGroup = tag;
    },
    showLeaveModal() {
      this.visibleLeaveModal = true;
      this.$refs.selectModal.blur();
    },
    // 调岗
    handleMoveSubmit(e) {
      var that = this;
      e.preventDefault();

      this.moveForm.validateFields((err, values) => {
        if (!err) {
          values.companyId = this.companyId;

          values.empIds = [this.selectedRowKeys[0]];
          transferJob(values).then(res => {
            that.hideList("visibleMoveDrawer");
            that.visibleSubmit = true;
          });
        }
      });
    },
    // 添加员工
    handleEmpyleeSubmit(e) {
      var that = this;
      e.preventDefault();
      this.empyleeForm.validateFields((err, values) => {
        if (!err) {
          values.companyId = this.companyId;
          values.employType = 1;
          values.formalType = 1;
          values.status = 2;

          saveEmpInfoRelation(values).then(res => {
            that.onCloseDrawer("Empylee");
            that.visibleSubmit = true;
          });
        }
      });
    },
    handleLeaveSubmit(e) {
      var that = this;
      e.preventDefault();
      this.leaveForm.validateFields((err, values) => {
        if (!err) {
          values.companyId = this.companyId;
          values.empIds = [this.selectedRowKeys[0]];
          values.quitReason = values.quitReason.join(",");

          leavePosition(values).then(res => {
            that.onCloseDrawer("Leave");
            that.visibleSubmit = true;
          });
        }
      });
    },
    showMeberDialog() {
      this.visibleMerber = true;
      this.adjustButtonDisabled = true;
      this.$refs.nameModal.blur();
      this.EmpListByDep();
    },
    selectEmp() {
      this.EmpListByDep();
    },
    EmpListByDep() {
      const data = {
        companyId: this.companyId,
        // parentId: 0,
        nameOrPhoneOrEmail: this.nameOrPhoneOrEmail
      };
      selectEmpInfoListForLeave(data).then(res => {
        this.empInfoList = res.data.entities;
      });
    },
    getEmpListData() {
      const data = {
        companyId: this.companyId,
        parentId: 0,
        nameOrPhoneOrEmail: this.nameOrPhoneOrEmail
      };
      getEmpListByDep(data).then(res => {
        this.empInfoList = res.data.entities;
      });
    },
    adjustEmp() {
      const selectObj = this.empInfoList.filter(item => {
        return item.id === this.selectedRowKeys[0];
      })[0];

      if (this.selectId === "4") {
        this.leaveForm.setFieldsValue({
          name: selectObj.name
        });
      } else if (this.selectId === "5") {
        this.moveForm.setFieldsValue({
          name: selectObj.name
        });
      }

      this.visibleMerber = false;
    },
    selectionChange(selection) {
      this.selectedRowKeys = [selection.pop()];

      this.adjustButtonDisabled = this.selectedRowKeys.length === 0;
    },
    handleSubmit(e) {
      var that = this;
      e.preventDefault();
      this.entryForm.validateFields((err, values) => {
        if (!err) {
          values.companyId = this.companyId;
          values.approFlowId = this.approFlowId;

          values.preJoinDep = values.depIdList && values.depIdList.join(",");
          values.preJoinPosition = values.positionIdList && values.positionIdList.join(",");

          saveEmpInfoPre(values).then(res => {
            that.onCloseDrawer("");
            that.visibleSubmit = true;
          });
        }
      });
    },
    handleJoinSubmit(e) {
      var that = this;
      e.preventDefault();
      this.joinForm.validateFields((err, values) => {
        if (!err) {
          values.companyId = this.companyId;
          values.id = this.joinFormData.id;
          values.approvalStatus = 5;
          confirmToJoin(values).then(res => {
            this.$notification["success"]({
              message: "success",
              description: "提交成功"
            });
            that.reload();
            this.visibleDrawer = false;
          });
        }
      });
    },
    handleRegularSubmit(e) {
      var that = this;
      e.preventDefault();
      this.regularForm.validateFields((err, values) => {
        if (!err) {
          values.companyId = this.companyId;
          values.empId = this.regularFormData.id;
          const data = {
            companyId: this.companyId,
            empIds: [this.regularFormData.id],
            regularDate: values.regularDate
          };

          transferRegular(data).then(res => {
            this.$notification["success"]({
              message: "success",
              description: "提交成功"
            });
            that.reload();
            this.visibleRegularDrawer = false;
          });
        }
      });
    },
    employTypeChange(val) {
      this.employType = val;
    },
    confirmJoin(e) {
      this.visibleJoinDrawer = true;

      this.joinFormData = e;
      setTimeout(() => {
        this.joinForm.setFieldsValue({
          id: e.id,
          name: e.name,
          phone: e.phone
        });
      }, 100);
    },
    // 办理入职 end
    onCloseDrawer(str) {
      this["visible" + str + "Drawer"] = false;
    },
    onCloseJoinDrawer() {
      this.visibleJoinDrawer = false;
    },
    onCloseRegularDrawer() {
      this.visibleRegularDrawer = false;
    },
    // 转正点击
    confirmRegular(e) {
      this.visibleRegularDrawer = true;

      this.regularFormData = e;
    },
    submitDrawer() {
      saveEmpInfoPre().then(res => {});
    },

    handleOkSubmit(e) {},
    handleCancelSubmit(e) {
      // this.visibleSubmit = false;
      this.reload();
    },
    // 取消筛选
    cancelSelect() {
      this.selectBox = false;
      // 清空条件
      this.sex = "";
      this.employType = "";
      this.formalType = "";
      this.depId = "";
      this.sexvalue = "";
      this.employTypevalue = "";
      this.formalTypevalue = "";
      this.depIdvalue = "";

      this.getEmpInfos();
    },
    preventDefault(x) {
      this[x] = "";
      this[x + "value"] = "";
      this.getEmpInfos();
      if (this.sex === "" && this.employType === "" && this.formalType === "" && this.depId === "") {
        this.selectBox = false;
      }
    },
    index: function(text, record, index) {},
    left: function() {
      this.tapList = tapArray.slice(0, 8);
    },
    right: function() {
      if (tapArray.length < 9) {
        return;
      }
      this.tapList = tapArray.slice(8, 16);
    },
    tapChange: function(id) {
      this.$router.push({ path: "/staff/manger", query: { selectId: id } });
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },

    leave: function(record) {
      this.$router.push({
        name: "leave",
        query: {
          empInfoId: record.id
        }
      });
    },
    makeTransfer(e) {
      this.visibleMoveDrawer = true;
      this.selectedRowKeys = [e.id];
      setTimeout(() => {
        this.moveForm.setFieldsValue({
          name: e.name
        });
      }, 300);
    },

    del(record) {
      var that = this;
      this.$confirm({
        title: "删除员工",
        content: "此操作将永久删除该员工, 是否继续?",
        onOk() {
          delEmpInfo({ id: record.id }).then(() => {
            renderTapCount({ companyId: that.$store.state.hr.companyId });
            that.reload();
            that.$notification["success"]({
              message: "删除成功!"
            });
          });
        },
        onCancel() {
          that.visible = true;
        }
      });

      this.visible = false;
    },
    displayRender({ labels }) {
      return labels[labels.length - 1];
    },
    select: function(e, x) {
      // 清空条件
      this.selectBox = true;
      this[x + "value"] = e.label;

      this.getEmpInfos(1);
    },
    detail: function(row) {
      this.$router.push({
        name: "staffDetail",
        query: {
          id: row.id
        }
      });
    },

    handleTableChange(pagination, filters, sorter) {
      this.managementList.pagination.current = pagination.current;
      this.getEmpInfos();
    },
    getEmpInfos(resetPageNo) {
      const pagination = this.managementList.pagination;
      const pageNo = resetPageNo || pagination.current;
      const pageSize = pagination.pageSize;

      const data = {
        pageNo: pageNo,
        pageSize: pageSize,
        status: tapArray[this.selectId]["status"],
        gender: this.sex === "" ? undefined : this.sex.key,
        nameOrPhone: this.nameOrPhone,
        employType: this.employType === "" ? undefined : this.employType.key,
        formalType: this.formalType === "" ? undefined : this.formalType.key,
        depId: this.depId === "" ? undefined : this.depId.value,
        companyId: this.companyId
      };

      let func;

      switch (this.selectId) {
        case "0":
          func = selectEmpInfoALLRelation(data);
          break;
        case "1":
          // 入职
          func = selectEmpInfoPendingRelation(data);
          break;
        case "2":
          // 转正
          func = selectEmpInfoToFormalRelation(data);
          break;
        case "3":
          // 在职
          func = selectEmpInfoOnJobRelation(data);
          break;
        case "4":
          // 离职
          delete data.status;
          func = selectEmpInfoLeaveRelation(data);
          break;
        case "5":
          // 调岗
          delete data.status;
          func = selectEmpInfoTransferRelation(data);
          break;
      }

      func.then(res => {
        this.managementList.data = res.data.entities;
        pagination.total = res.data.entityCount;
        this.total = res.data.entityCount;
        this.managementList.loading = false;
      });
    },
    tree(array, childKey, onlyLastChild) {
      if (array === null || array.length < 1) {
        return [];
      }
      array.map((item, index) => {
        item["value"] = item.id;
        item["key"] = item.id;
        item["label"] = item.name;
        item["children"] = item[childKey];

        if (item.children) {
          item["disabled"] = onlyLastChild;
          this.tree(item.children, childKey, onlyLastChild);
        }
      });
      return array;
    },

    formal(record) {
      var that = this;
      this.$confirm({
        title: "转正式",
        content: "此操作将该员工聘用形式转为正式?",
        onOk() {
          transferFormal({
            empId: record.id,
            probationDate: formatDate(new Date()),
            companyId: that.companyId
          }).then(() => {
            that.$notification["success"]({
              message: "成功!"
            });
            that.visible = true;
          });
        },
        onCancel() {
          that.visible = true;
        }
      });
      this.visible = false;
    },
    regular(record) {
      var that = this;
      this.$confirm({
        title: "转正",
        content: "此操作将该员工转为正式员工?",
        onOk() {
          transferRegular({
            empIds: [record.id],
            regularDate: formatDate(new Date()),
            companyId: that.companyId
          }).then(() => {
            that.$notification["success"]({
              message: "成功!"
            });
            that.visible = true;
          });
        },
        onCancel() {
          that.visible = true;
        }
      });
      this.visible = false;
    }
  }
};

function formatDate(value) {
  if (isNaN(value) || value === "") {
    return "";
  }
  const date = new Date(value);
  const Y = date.getFullYear();
  let m = date.getMonth() + 1;
  let d = date.getDate();
  let H = date.getHours();
  let i = date.getMinutes();
  let s = date.getSeconds();
  if (m < 10) {
    m = "0" + m;
  }
  if (d < 10) {
    d = "0" + d;
  }
  if (H < 10) {
    H = "0" + H;
  }
  if (i < 10) {
    i = "0" + i;
  }
  if (s < 10) {
    s = "0" + s;
  }
  const t = Y + "-" + m + "-" + d;
  return t;
}
</script>

<style lang="scss" scoped>
.hrManagementBox {
  // padding-left: 15px;
  padding: 0 16px 32px;
}

.header {
  user-select: none;
}

.tapButton {
  cursor: pointer;
}
.button-group {
  margin-top: 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid #e8e8e8;
}

.tapButtonBox {
  // padding-left: 2%;
  background-color: #fff;
  width: 99%;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
  // border-radius: 12px 12px 12px 12px;
}

.tapButton {
  height: 112px;
  width: 11.63%;
  padding-top: 1px;
  display: inline-block;
  margin-right: 1%;
  text-align: center;
  font-family: PingFangSC-Regular, PingFang SC;
}

.tapTitle {
  font-size: 14px;
  font-weight: 400;
  color: rgba(179, 154, 122, 1);
  margin-top: 30px;
}

.tapSpan {
  display: block;
  position: relative;
  top: 10px;
  color: black;
  font-size: 24px;
  font-weight: 500;
}

.selectEle {
  background: rgba(252, 175, 79, 0.12);
}

.filter {
  height: 350px;
  width: 300px;

  .filterItem {
    margin-top: 20px;

    label {
      width: 70px;
      padding-right: 10px;
      display: inline-block;
      text-align: right;
    }

    .ant-input,
    .ant-select,
    .ant-cascader-picker {
      width: 200px;
    }
  }
}

#nameOrPhone {
  width: 256px;
  height: 36px;
  border-radius: 21px !important;
  padding-left: 40px;
}

.drawer-title {
  // width:492px;
  height: 48px;
  line-height: 48px;
  padding-left: 24px;
  color: #333;
  background: rgba(250, 250, 250, 1);
}
.modal-box {
  text-align: center;
}
.modal-title {
  font-size: 20px;
  font-weight: 400;
  color: #000000;
  line-height: 28px;
}
.modal-content {
  font-size: 16px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.25);
  line-height: 22px;
}
</style>
